<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度侦听 deep </title>
    <script src="../lib/vue-2.6.12.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                // 用户的信息对象
                info:{
                    username:'admin',
                }
            },
            watch: {
                info: {
                    handler(newVal) {
                        console.log(newVal)
                        console.log(newVal.username)
                    },
                    // 注意: deep 写在监听对象里面
                    // 开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
                    deep: true,
                },
                // 如果要侦听的是对象的子属性的变化,则必须包裹一层单引号
                'info.username'(newVal) {
                    console.log(newVal)
                }

            }
        })
    </script>
</body>
</html>